<template>
    <div class="groupmodal-page">
      <container-box :metaTitle="routeMeta.title || ''">
          <div slot="container">
              <mds-button type="primary" @click="openModal">分组表单弹框</mds-button>
              <mds-modal
                  :visibility="visibility"
                  class="group_modal"
                  title="分组表单弹框"
                  width="936px"
                  :mask="mask"
                  @close="handleClose"
                  :showClose="true"
              >
                  <div class="group">
                      <p class="group-title">分组1</p>
                      <mds-row class="row" type="flex" :gutter="16" justify="space-between">
                          <mds-col :span="8">
                              <p class="title">文本输入框<em style="color: #e33; margin-left: 5px;">*</em></p>
                              <mds-input
                                  placeholder="请输入名称"
                                  v-model="inputValue1"
                              ></mds-input>
                          </mds-col>
                          <mds-col :span="8">
                              <p class="title">文本输入框<em style="color: #e33; margin-left: 5px;">*</em></p>
                              <mds-input
                                  placeholder="请输入名称"
                                  v-model="inputValue2"
                              ></mds-input>
                          </mds-col>
                          <mds-col :span="8">
                              <p class="title">下拉未选</p>
                              <mds-select
                                  style="width: 100%;"
                                  defaultValue="选项一"
                                  placeholder="请选择"
                                  :value="selectValue"
                                  @change="handleChange"
                                  size="medium"
                                  >
                                  <mds-option value="选项一">选项一</mds-option>
                                  <mds-option value="选项二">选项二</mds-option>
                                  <mds-option value="选项三">选项三</mds-option>
                              </mds-select>
                          </mds-col>
                      </mds-row>
                      <mds-row class="row" type="flex" :gutter="16" justify="space-between">
                          <mds-col :span="8">
                              <p class="title">下拉已选
                                  <!-- <mds-tooltip title="tooltip提示">
                                      <mds-icon type="line-question-circle" />
                                  </mds-tooltip> -->
                              </p>
                              <mds-select
                                  style="width: 100%;"
                                  defaultValue="选项一"
                                  placeholder="请选择"
                                  :value="select1Value"
                                  @change="handleChange1"
                                  size="medium"
                                  >
                                  <mds-option value="选项一">选项一</mds-option>
                                  <mds-option value="选项二">选项二</mds-option>
                                  <mds-option value="选项三">选项三</mds-option>
                              </mds-select>
                          </mds-col>
                          <mds-col :span="8">
                              <p class="title">时间选择</p>
                              <mds-time-picker
                                  style="width: 100%;"
                                  v-model="timeValue1">
                              </mds-time-picker>
                          </mds-col>
                          <mds-col :span="8">
                              <p class="title">时间选择</p>
                              <mds-time-picker
                                  style="width: 100%;"
                                  :is-range="true"
                                  v-model="timeValue2" >
                              </mds-time-picker>
                          </mds-col>
                      </mds-row>
                  </div>
                  <div class="group">
                      <p class="group-title">分组2</p>
                      <mds-row class="row" type="flex" :gutter="16" justify="space-between">
                          <mds-col :span="24">
                              <p class="title">单项选择</p>
                              <mds-radio-group
                                  v-model="checkedValue"
                                  name="radiogroup">
                                  <mds-radio value="a">按城市计划</mds-radio>
                                  <mds-radio value="b">按部门计划</mds-radio>
                                  <mds-radio value="c">按部门计划</mds-radio>
                                  <mds-radio value="d">按部门计划</mds-radio>
                              </mds-radio-group>
                          </mds-col>
                      </mds-row>
                  </div>
                  <div slot="footer" style="text-align: right;">
                      <Mds-button type="primary" @click='handleOk' style="margin-left: 8px;">
                      保存
                      </Mds-button>
                      <Mds-button @click='handleClose' style="margin-left: 8px;">
                      取消
                      </Mds-button>
                  </div>
              </mds-modal>
          </div>
      </container-box>
    </div>
</template>
<script>
import ContainerBox from '@/components/ContainerBox'

export default {
  components: {
    ContainerBox
  },
  computed: {
    routeMeta() {
      return this.$route.meta || {}
    }
  },
  data() {
    return {
      inputValue1: '',
      inputValue2: '',
      selectValue: '',
      select1Value: '选项二',
      timeValue1: null,
      timeValue2: [
        null,
        null
      ],
      checkedValue: 'a',
      textareaValue: '',
      visibility: false,
      mask: true
    }
  },
  methods: {
    handleChange(val) {
      this.selectValue = val
    },
    handleChange1(val) {
      this.select1Value = val
    },
    openModal() {
      this.visibility = true
    },
    handleOk() {
      this.visibility = false
    },
    handleClose() {
      this.visibility = false
    }
  }
}
</script>
<style>
.group_modal .group .group-title{
    padding: 13px 0;
    font-size: 16px;
    font-weight: bold;
    color: #354052;
    border-bottom: 1px solid rgba(240,242,245,1);
    margin-bottom: 19px;
}
.group_modal .row{
    margin-bottom: 24px;
    font-size: 14px;
}
.group_modal .row .title{
    margin-bottom: 8px;
    color: #7F8FA4;
}

</style>
